<template>
    <div>
        <div class="container">
            <!-- 轮播 -->
            <div
                id="carousel-example-generic"
                class="carousel slide btn_banner"
                data-ride="carousel"
                >
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li
                    data-target="#carousel-example-generic"
                    data-slide-to="0"
                    class="active"
                    ></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner banner_img" role="listbox" style="height:500px">
                    <div class="item active">
                    <img src="../../../static/images/banner34.png" alt="..." style="height:500px" />
                    </div>
                    <div class="item">
                    <img src="../../../static/images/banner34.png" alt="..." style="height:500px" />
                    </div>
                    <div class="item">
                    <img src="../../../static/images/banner34.png" alt="..." style="height:500px" />
                    </div>
                </div>
            </div>

            <div class="m-main">
                <!-- 餐饮配套 -->
                <div class="m-box">
                    <div class="box-title">
                        || 餐饮配套
                        <span @click="go_more()">更多 》</span>
                    </div>
                    <div class="box-item">
                        <ul>
                            <li v-for="(item,index) in food_list" :key="index">
                                <div class="li-box">
                                    <div class="box-img">
                                        <img :src="item.img" alt="">
                                    </div>
                                    <div class="box-detail">
                                        <div class="d-name text-overflow">{{item.name}}</div>
                                        <div class="d-place text-overflow">{{item.place}}</div>
                                        <button>{{item.btn}}</button>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 休闲娱乐 -->
                <div class="m-box">
                    <div class="box-title">
                        || 休闲娱乐
                        <span>更多 》</span>
                    </div>
                    <div class="box-item">
                        <ul>
                            <li v-for="(item,index) in arder_list" :key="index">
                                <div class="li-box">
                                    <div class="box-img">
                                        <img :src="item.img" alt="">
                                    </div>
                                    <div class="box-detail">
                                        <div class="d-name text-overflow">{{item.name}}</div>
                                        <div class="d-place text-overflow">{{item.place}}</div>
                                        <button>{{item.btn}}</button>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 娱乐闲区 -->
                <div class="m-box">
                    <div class="box-title">
                        || 娱乐闲区
                        <span>更多 》</span>
                    </div>
                    <div class="box-item">
                        <ul>
                            <li v-for="(item,index) in play_list" :key="index">
                                <div class="li-box">
                                    <div class="box-img">
                                        <img :src="item.img" alt="">
                                    </div>
                                    <div class="box-detail">
                                        <div class="d-name text-overflow">{{item.name}}</div>
                                        <div class="d-place text-overflow">{{item.place}}</div>
                                        <button>{{item.btn}}</button>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 生活服务 -->
                <div class="m-box">
                    <div class="box-title">
                        || 生活服务
                        <span>更多 》</span>
                    </div>
                    <div class="box-item">
                        <ul>
                            <li v-for="(item,index) in life_list" :key="index">
                                <div class="li-box">
                                    <div class="box-img">
                                        <img :src="item.img" alt="">
                                    </div>
                                    <div class="box-detail">
                                        <div class="d-name text-overflow">{{item.name}}</div>
                                        <div class="d-place text-overflow">{{item.place}}</div>
                                        <button>{{item.btn}}</button>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>

export default {
    data(){
        return{
            food_list:[
                {
                    img:'../../../static/images/food35.png',
                    name:'厦门闽南院子',
                    place:'湖里区华悦路188号',
                    btn:'中餐',
                },
                {
                    img:'../../../static/images/food36.png',
                    name:'珠泽海鲜坊',
                    place:'湖里区华悦路188号',
                    btn:'海鲜',
                },
                {
                    img:'../../../static/images/food37.png',
                    name:'厦门闽南院子',
                    place:'湖里区华悦路188号',
                    btn:'西餐',
                },
            ],
            arder_list:[
                {
                    img:'../../../static/images/band1.png',
                    name:'招商银行',
                    place:'湖里区华悦路188号',
                    btn:'ATM',
                },
                {
                    img:'../../../static/images/band2.png',
                    name:'浦发银行',
                    place:'湖里区华悦路188号',
                    btn:'营业厅',
                },
                {
                    img:'../../../static/images/band3.png',
                    name:'招商银行',
                    place:'湖里区华悦路188号',
                    btn:'ATM',
                },
            ],
            play_list:[
                {
                    img:'../../../static/images/play1.png',
                    name:'零距离健身',
                    place:'湖里区华悦路188号',
                    btn:'健身房',
                },
                {
                    img:'../../../static/images/play2.png',
                    name:'健身无极',
                    place:'湖里区华悦路188号',
                    btn:'游泳馆',
                },
                {
                    img:'../../../static/images/play2.png',
                    name:'健身无极',
                    place:'湖里区华悦路188号',
                    btn:'游泳馆',
                },
            ],
            life_list:[
                {
                    img:'../../../static/images/life1.png',
                    name:'九鼎药房',
                    place:'湖里区华悦路188号',
                    btn:'药店',
                },
                {
                    img:'../../../static/images/play2.png',
                    name:'移动营业厅',
                    place:'湖里区华悦路188号',
                    btn:'自助',
                },
                {
                    img:'../../../static/images/play2.png',
                    name:'健身无极',
                    place:'湖里区华悦路188号',
                    btn:'游泳馆',
                },
            ],

        }
    },
    methods:{
        go_more(){
            this.$router.push({path: '/Pages/ParkMatch/Search'})
        }
    }
}
</script>
<style lang="less" scoped>
    .container{
        background: #F3F3F3;
    }
    .m-main{
        padding: 0 10px 300px;
        color: #333;
        font-family:MicrosoftYaHei-Bold;
        font-weight:400;
        .m-box{
            margin-top: 60px;
            .box-title{
                font-size: 24px;
                font-weight:bold;
                position: relative;
                &>span{
                    position: absolute;
                    right: 0;
                    top: 0;
                    font-size: 16px;
                    color: #1575F9;
                    &:hover{
                        cursor: pointer;
                    }
                }
            }
            .box-item{
                margin-top: 40px;
                &>ul{
                    li{
                        width: 30%;
                        margin-right: 4.5%;
                        display: inline-block;
                        background: #fff;
                        &:last-child{
                            margin-right: 0;
                        }
                        &:nth-child(3n){
                            margin-right: 0;
                        }
                        .li-box{
                            padding: 40px;
                            .box-img{
                                width: 100%;
                                img{
                                    width: 100%;
                                }
                            }
                            .box-detail{
                                margin-top: 20px;
                                position: relative;
                                .d-name{
                                    font-size: 20px;
                                    font-weight: bold;
                                    width: 70%;
                                }
                                .d-place{
                                    font-size: 16px;
                                    color: #666;
                                    margin-top: 10px;
                                    width: 70%;
                                }
                                &>button{
                                    position: absolute;
                                    right: 0;
                                    top: 17px;
                                    width: 80px;
                                    height: 32px;
                                    line-height: 32px;
                                    background:linear-gradient(0deg,rgba(255,153,0,1),rgba(255,153,0,1));
                                    color: #fff;
                                    border: none;
                                    border-radius:4px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
